import React,{useState,useEffect,useMemo} from 'react'

function UseMemo(props){
    console.log('start')
    const [qty,setQty] = useState(1)
    const [page,setPage] = useState(1)

    const [arr,setArr] = useState([10,5,8,12,20,16,33,9])
    // 求和

    // 传统写法
    // const total = arr.reduce((prev,item)=>prev+item,0)

    // 用法一：默认用法（与传统写法一致，初始化和组件刷新时都执行回掉函数中的代码）
    // const total = useMemo(()=>{
    //     // 这里的代码在初始化和组件更新时执行
    //     console.log('用法一：默认用法')
    //     return arr.reduce((prev,item)=>prev+item,0)
    // })
    
    // 用法二：指定空依赖（初始化时执行回掉得到计算结果并缓存，组件刷新时得到缓存值）
    // const total = useMemo(()=>{
    //     // 这里的代码在初始化时执行
    //     console.log('用法二：指定空依赖')
    //     return arr.reduce((prev,item)=>prev+item,0)
    // },[])

    // 用法三：指定依赖（初始化或依赖发生变化时执行回调得到计算结果并缓存，其他场景得到缓存值）
    const total = useMemo(()=>{
        // 这里的代码在初始化时执行
        console.log('用法三：指定依赖12')
        return arr.reduce((prev,item)=>prev+item,0)
    },[arr])


    console.log('end')
    return (
        <div>
            <h4>useMemo</h4>
            <button onClick={()=>{
                setQty(qty+1)
            }}>qty: {qty}</button>
            <button onClick={()=>{
                setPage(page+1)
            }}>page: {page}</button>
            <div>arr: {arr.join(',')}</div>
            <div>Total：{total}</div>
            <button onClick={()=>{
                setArr([...arr,parseInt(Math.random()*100)])
            }}>添加</button>
        </div>
    )
}

export default UseMemo;